<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02.canvas绘制表格</title>
</head>
<body>
    <canvas id="canvas">

    </canvas>

    <script>
        window.onload = function () {
            console.log('onload');
            //获取canvas节点对象
            var canvasRef = document.querySelector('canvas');

            canvasRef.width = 600;
            canvasRef.height = 600;

            canvasRef.style.border = '1px solid #000'
            //获取canvas上下文对象
            var ctx = canvasRef.getContext('2d');
            ctx.lineWidth = 0.5;
            //表格间隔
            var rect = 10;
            for (var i = 0; i<canvasRef.width/rect;i++){
                console.log(i)
                //表格纵轴
                ctx.moveTo(0,i*rect);
                ctx.lineTo(canvasRef.width,i*rect);
                //表格横轴
                ctx.moveTo(i*rect,0);
                ctx.lineTo(i*rect,canvasRef.width);


            }
            //描边样式
            ctx.strokeStyle = 'rgba(0,0,0,0.2)';
            ctx.stroke();


        }
    </script>
</body>
</html>
